<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<script src="js/mock.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/database.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/shop-point.css" />
	</head>
	<body>
		<header>
			<img src="img/back.svg" class="back">
			<h1 class="mui-title">积分商城</h1>
			<img src="img/top-chose.png" class="header-right">
		</header>
		<div id="banner" class="banner">
			<div class="idot space-between" id="idot"></div>
			<ul class="banner-box flex" id="banner-box">
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<div id="mypoint">
			<ul class="space-between">
				<li>我的积分</li>
				<li>历史兑换</li>
			</ul>
		</div>
		<div id="pointlist">
			<ul class="space-around">
				<li><img src="img/pointlist1.svg">
					<p>合亿户外</p>
				</li>
				<li><img src="img/pointlist2.svg">
					<p>精选小件</p>
				</li>
				<li><img src="img/pointlist3.svg">
					<p>合亿好礼</p>
				</li>
				<li><img src="img/pointlist4.svg">
					<p>特惠票务</p>
				</li>
			</ul>
		</div>
		<div id="commodity">
			<div class="commodity-top space-between">
				<span>商品兑换</span>
				<img src="img/go.svg">
			</div>
			<div class="com-main">
				<ul class="space-around flex-wrap">
					<li>
						<img src="img/clothing1.png">
						<span>户外必备外套（卖点）</span>
						<p class="misc">Jackwolf狼爪 专业户外 合亿购专供</p>
						<p class="space-between"><span>256 积分</span><span>兑换</span></p>
					</li>
					<li>
						<img src="img/clothing2.png">
						<span>户外必备外套（卖点）</span>
						<p class="misc">Jackwolf狼爪 专业户外 合亿购专供</p>
						<p class="space-between"><span>256 积分</span><span>兑换</span></p>
					</li>
					<li>
						<img src="img/clothing3.png">
						<span>户外必备外套（卖点）</span>
						<p class="misc">Jackwolf狼爪 专业户外 合亿购专供</p>
						<p class="space-between"><span>256 积分</span><span>兑换</span></p>
					</li>
					<li>
						<img src="img/clothing4.png">
						<span>户外必备外套（卖点）</span>
						<p class="misc">Jackwolf狼爪 专业户外 合亿购专供</p>
						<p class="space-between"><span>256 积分</span><span>兑换</span></p>
					</li>
				</ul>
			</div>
		</div>
		<div id="backtop">
			<img src="img/backtop.svg">
		</div>
		<div id="sidebar">
			<img id="sidimg" src="img/menu.png">
			<ul id="sidetext" class="space-around flex-wrap">
				<li>首页</li>
				<li>个人中心</li>
				<li>户外活动</li>
			</ul>
		</div>
		<div class="more">

		</div>
	</body>
	<script src="js/resultbank.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		window.onload = function() {
				app.banner('banner', 3000);
				app.mockhot('/pagebanner', function(res) {
					var responseText = JSON.parse(res);
					var box = document.getElementById('banner-box');
					var li = box.getElementsByTagName('li');
					for (var i = 0; i < li.length; i++) {
						li[i].style.background = 'url(' + responseText.src[i] + ') no-repeat center center';
					}
				})

				function backtop() {
					var btop = document.getElementById('backtop');
					var timer = null;

					function scrollTop() {
						cancelAnimationFrame(timer);
						timer = requestAnimationFrame(function sTop() {
							var top = document.body.scrollTop || document.documentElement.scrollTop;
							if (top > 0) {
								document.body.scrollTop = document.documentElement.scrollTop = top - 60;
								timer = requestAnimationFrame(sTop);
							} else {
								cancelAnimationFrame(timer);
							}
						});
					}
					btop.addEventListener('touchend', scrollTop, false);
				}
				backtop()

				function side() {
					var sideon = document.getElementById('sidimg');
					var sitext = document.getElementById('sidetext');
					var n = 0;

					sideon.addEventListener('touchend', function() {
							if (n == 0) {
								sideon.src = 'img/cuo.svg';
								sitext.style.height = 7.055555 + 'rem';
								sitext.style.top = -7.472222 + 'rem';
								n = 1;
							} else if (n == 1) {
								sideon.src = 'img/menu.png';
								sitext.style.height = 0;
								sitext.style.top = -0.416666 + 'rem';
								n = 0;
							}
						})
						
					}
					side()
				}
	</script>
</html>
